(function ($) {
  $.fn.dialog = function () {
    var $this = this;
    var dialogContainer,dialogMask;
    function _init () {
      var dialogDiv = $("#dialogDiv");
      if(dialogDiv.length == 0){
        dialogDiv = $('<div id="dialogDiv">\
                            <div id="dialogDiv" class="dialog_wrapper">\
                              <div class="dialog_top">\
                                  <a class="close" href="###"><img src="../static/images/fl_close.png" /></a>\
                              </div>\
                              <div class="dialog_mian"></div>\
                              <div class="dialog_bttom"></div>\
                            </div>\
                            <div class="dialog_mask"></div>\
                          </div>');
        $("body").append(dialogDiv);
      }
      dialogContainer = dialogDiv.find(".dialog_wrapper");
      dialogMask = dialogDiv.find(".dialog_mask");
      dialogContainer.find(".close").click(hideDialog);
      var dialogMain = dialogContainer.find(".dialog_mian");
      dialogMain.empty();
      dialogMain.append($this.clone(true).show());
      showDialog();
    }

    function centerDiv(obj){
      var windowWidth = document.documentElement.clientWidth;   
      var windowHeight = document.documentElement.clientHeight;   
       
      var popupHeight =$(obj).height();   
      var popupWidth =$(obj).width();    
       
       $(obj).css({
        "top": (windowHeight-popupHeight-200)/2+$(document).scrollTop()+130,   
        "left": (windowWidth-popupWidth)/2   
       });  
    }
    function showDialog () {
      dialogMask.show().css("height",$("body").height());
      dialogContainer.show();
      centerDiv(dialogContainer);

      $(window).bind("scroll resize",function(){
        centerDiv(dialogContainer);
      });
    }

    function hideDialog () {
      dialogMask.hide();
      dialogContainer.hide();
      $(window).unbind("scroll resize");
    }
    _init();
  }

  $.fn.arrowSlide = function (option){
    var defalut = {
      sliderChangedHandler:null // function()
    };

    var config;
    var _self = $(this);
    var $wrapper = $('> div', _self).css('overflow', 'hidden'),
        $slider = $wrapper.find('> ul'),
        $items = $slider.find('> li'),
        $single = $items.filter(':first'),
        singleWidth = $single.outerWidth(), 
        visible = Math.ceil($wrapper.innerWidth() / singleWidth),
        currentPage = 1,
        pages = Math.ceil($items.length / visible);

    function _init(){
      config = $.extend({},defalut,option);

      // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
      if (($items.length % visible) != 0) {
          $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
          $items = $slider.find('> li');
      }

      // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
      $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
      $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
      $items = $slider.find('> li'); // reselect
      
      var curIndex = $items.filter(".visible").filter(":not(.cloned)").index();
      if(curIndex>0){
        currentPage = Math.ceil(curIndex/visible);
      }

      // 3. Set the left position to the first 'real' item
      $wrapper.scrollLeft(singleWidth * currentPage * visible);
      if(config.sliderChangedHandler){
        config.sliderChangedHandler();
      }
      appendSliderButton();
    }


    _init();


    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
                
    // 4. paging function
    function gotoPage(page) {
        var dir = page < currentPage ? -1 : 1,
            n = Math.abs(currentPage - page),
            left = singleWidth * dir * visible * n;
        $items.removeClass("visible");
        $wrapper.filter(':not(:animated)').animate({
            scrollLeft : $wrapper.scrollLeft() + left
        }, 500, function () {
            if (page == 0) {
                $wrapper.scrollLeft(singleWidth * visible * pages);
                page = pages;
            } else if (page > pages) {
                $wrapper.scrollLeft(singleWidth * visible);
                // reset back to start position
                page = 1;
            } 

            currentPage = page;
            var startIndex = currentPage*visible;
            var endIndex = startIndex + visible;
            for (var i = startIndex; i < endIndex; i++) {
              $items.eq(i).addClass("visible");
            };

            if(config.sliderChangedHandler){
              config.sliderChangedHandler();
            }
        });                
        
        
        return false;
    }
    
    function appendSliderButton() {
      $wrapper.after('<a class="arrow back">back</a><a class="arrow forward">forward</a>');
    
      // 5. Bind to the forward and back buttons
      $('a.back', _self).click(function () {
          return gotoPage(currentPage - 1);                
      });
      
      $('a.forward', _self).click(function () {
          return gotoPage(currentPage + 1);
      });
    }
    
    // create a public interface to move to a specific page
    _self.bind('goto', function (event, page) {
        gotoPage(page);
    });
  }
})(jQuery);